<template>
   <h2>用户还款列表</h2>
   借款款项名称<input type="text" v-model="state.name" />
   利息<select v-model="state.iid">
                       <option value="0">--请选择--</option>
                       <option :value="item.I_Id" v-for="item in llist">{{ item.I_Year}}年{{item.I_Interest}}%</option>
                     </select>
                     <input type="button" @click="show" value="查询" />
   <table class="table table-bordered">
       <tr align="center">
           <td><input type="checkbox"></td>
                   <td>借款项目编号</td>
                   <td>借款项目名称</td>
                   <td>借款最高金额</td>
                   <td>借款最高年限</td>
                   <td>借款金额</td>
                   <td>预计月还款金额</td>
                   <td>利息值</td>
                   <td>操作</td>
       </tr>
       <tr align="center" v-for="item in list">
           <td><input type="checkbox"></td>
                   <td>{{item.B_Id}}</td>
                   <td>{{item.B_Name}}</td>
                   <td>{{item.B_Money}}</td>
                   <td>{{item.B_Year}}</td>
                   <td>{{item.UB_Money}}</td>
                   <td>{{(item.B_Money/100/12).toFixed(2)}}CNY</td>
                   <td>{{item.I_Interest}}</td>
                   <td><input type="button" value="还款" class="btn btn-primary" @click="redeem(item.UB_Id)" /></td>
       </tr>
   </table>
   <div>
       <input type="button" value="首页" @click="page('a')" />
           <input type="button" value="上一页" @click="page('prev')" />
           <input type="button" value="下一页" @click="page('next')" />
           <input type="button" value="尾页" @click="page('b')" />
           共<span style="color: red;">{{ListCount}}</span>条数据
           每页<span style="color: red;">{{state.pageSize}}</span>条 
           当前第<span style="color: red;">{{state.pageIndex}}</span>/
           <span style="color: red;">{{PageCount}}</span>页
   </div>
   
   </template>
   
   <script setup lang="ts">
   import{reactive,ref,toRefs,onMounted} from 'vue'
   import { useRouter } from 'vue-router'
   import axios from 'axios'
   import {useUserStore} from '../../store/User'
//创建store对象
const userStore=useUserStore();
   
   let router=useRouter()
   let data:any=reactive({
       list:[],
       llist:[],
       state:{
           name:'', 
           iid:'',
           pageSize:'2',
           pageIndex:'1',
       },
       ListCount:'0',
       PageCount:'0',
   })
   let {state,ListCount,PageCount,list,llist}=toRefs(data)
   onMounted(()=>{
       show();
       bang();
   })
   //绑下拉
   const bang=()=>{
       axios({
           url:"/api/Borrow/SelInterest",
           method:'get',
       })
       .then(res=>{
           console.log(res.data.data);
           llist.value=res.data.data;
       })
       .catch(err=>{
           console.log(err);   
       })
   }
   //获取用户借款列表
   const show=()=>{
       axios({
           url:"/api/Borrow/GetUserBorrowInfosByUId",
           method:'get',
           params:{
            uid:userStore.userInfo.U_Id
           }
       })
       .then(res=>{
           console.log(res.data.data)
           list.value=res.data.data;
           ListCount.value=res.data.ListCount
           PageCount.value=res.data.PageCount
       })
       .catch(err=>{
           console.log(err)
       })
   }
   //分页
   const page=(aa:any)=>{
       console.log(aa) 
       if(aa=='a')
       {
           state.value.pageIndex=1;
      }
       else if(aa=='b')
       {
           state.value.pageIndex=PageCount.value;     
       }
      else if(aa=='prev')
       {
          state.value.pageIndex--; 
       }
      else if(aa=='next')
       {
          state.value.pageIndex++; 
       }
    
       show();
   }
   //还款跳转
   const redeem=(id:any)=>{
       router.push({
           path:'/main/userRedeem',
           query:{
               id:id
           }
       })
   }
   </script>
   
   
   
   
   
   <style scoped>
   
   </style>